import React from 'react';

const Card = ({
  percentage = 37.5,
  label = "45bar",
  height = 4
}) => {
  // 确保百分比值在0-100范围内
  const clampedPercentage = Math.max(0, Math.min(100, percentage));

  return (
    <div className="w-full">
      {/* Smaller font size for percentage */}
      <div className="text-xs text-gray-700 font-medium mb-1">
        {clampedPercentage}%
        ✓ {label}({clampedPercentage}%)
      </div>

      {/* Smaller font size for label */}
      <div className="text-xs text-gray-600 mb-2">
      </div>

      {/* 进度条容器 */}
      <div
        className="w-full bg-gray-300 rounded-full overflow-hidden"
        style={{ height: height }}
      >
        {/* 进度条填充 */}
        <div
          className="bg-blue-500 h-full transition-all duration-300 ease-in-out"
          style={{ width: `${clampedPercentage}%` }}
        />
      </div>
    </div>
  );
};

export default Card;